/** @jsx jsx */;
import {keyframes,ClassNames, css, jsx } from '@emotion/react'
import * as React from 'react';
import QRCode  from 'qrcode';
import Col from "../Col"
import Barcode from 'react-barcode';
import SelectMethod from './SelectMethod'
import SelectJh from './SelectJh'
import SelectSyy from './SelectSyy'
import SelectQm from './SelectQm'
const css_global=css`
  position:"relative";
  .only_screen{
  }
.line_input{
 border:none;
 border-bottom:1px solid #000;
}
@page { margin: 0 }
body { margin: 0px 0px 0px 0px;}
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

/** Paper sizes **/
.A3               .sheet { width: 297mm; height: 419mm }
.A3.landscape     .sheet { width: 420mm; height: 296mm }
.A4               .sheet { width: 210mm; height: 296mm }
.A4.landscape     .sheet { width: 297mm; height: 209mm }
.A5               .sheet { width: 148mm; height: 209mm }
.A5.landscape     .sheet { width: 210mm; height: 147mm }
.letter           .sheet { width: 216mm; height: 279mm }
.letter.landscape .sheet { width: 280mm; height: 215mm }
.legal            .sheet { width: 216mm; height: 356mm }
.legal.landscape  .sheet { width: 357mm; height: 215mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
  .only_screen{display: none}
           .A3.landscape { width: 420mm }
  .A3, .A4.landscape { width: 297mm }
  .A4, .A5.landscape { width: 210mm }
  .A5                    { width: 148mm }
  .letter, .legal    { width: 216mm }
  .letter.landscape      { width: 280mm }
  .legal.landscape       { width: 357mm }
}    `;
let fs,path,ipcRenderer,remote,initpath;
if(window.require){
  fs=window.require("fs");
  path=window.require("path");
  remote = window.require('electron').remote; //
  ipcRenderer = window.require('electron').ipcRenderer; //
  initpath=window.require('electron').ipcRenderer.sendSync('getpath');
}
export default function ButtonDefaultExample(props){
  const [state,setState]=React.useState({items:[]
    ,method:"ASTM E1019-18",syy:"yangjianing",ysry:"linfei",yqbh:"ULANV8HR",syyqm:"linfei"
    ,value:"ffbh&ASTM E1019-18\nsyy&yangjianing\nysry&linfei\nyqbh&ULANV8HR\nsyyqm&linfei"});
  const genQR=()=>{
      let ids=["ffbh&"+state.method,"syy&"+state.ysry,"ysry&"+state.syy,"syyqm&"+state.syyqm]
      let items=state.items;
      let item_one=ids.map((one,index)=>{
        return (<Barcode  renderer="canvas"  key={index} value={one} />);
      })
      items.push(<div key={items.length} style={{border:"solid #000 1px",display:"flex",flexDirection:"column", justifyContent:"space-between"}}>{item_one}</div>)
      setState((state)=>({...state,items:items}));
  }
  const save_as_click = () => {
  };
  const clear=()=>{
    setState((state)=>({...state,items:[]}));
  }
  const onChange=(e)=>{
    // setState((state)=>({...state,value:e.target.value}));
  }
  const method_change=(v)=>{
   setState((state)=>({...state,method:v})); 
  }
  const jh_change=(v)=>{
   setState((state)=>({...state,ysry:v})); 
  }
  React.useEffect(()=>{
    // genQR();
  },[])
  console.log(state);
  let value="ffbh&"+state.method+"\nsyy&"+state.syy+"\nysry&"+state.ysry+"\nyqbh&"+state.yqbh+"\nsyyqm&"+state.syyqm;
  return (
   <div css={css_global}>
     <div className="only_screen"> 
       <div style={{display:"flex"}}>
          method
          <SelectMethod value={state.method}  onChange={method_change}/>
          syy
          <SelectSyy value={state.syy}  onChange={(v)=>{
              setState((state)=>({...state,syy:v})); 
          }}/>
          ysry
          <SelectJh value={state.ysry}  onChange={jh_change}/>
          syyqm
          <SelectQm value={state.syyqm}  onChange={(v)=>{
              setState((state)=>({...state,syyqm:v})); 
          }}/>
        </div>
        <textarea rows="7" cols="30" wrap="hard" value={value} onChange={onChange}></textarea>

        <div style={{display:"flex"}}>
          <button onClick={genQR}>生成</button>
          <button onClick={clear}>clear</button>
       </div>
     </div>

    <div style={{display:"flex",flexDirection:"row",flexWrap:"wrap"}}>
      {state.items}
    </div>
   </div>
  );
};


